.all {

    height: 97%;
    width: 100%;
    // background-color: aqua;
    display: flex;
    flex-direction: column;

    overflow: hidden;
    // position: relative;

    .head {
        width: 100%;
        height: 3vw;
        background-color: rgb(8, 17, 32);
        display: flex;
        // position: fixed;
        // top: 0;
        // justify-content: space-around;

        .brandName {
            width: 60%;
            height: 100%;
            left: 0;
            text-align: left;
            display: flex;
            align-items: flex-end;

            .GEBOSS {
                background: url(/src/views/index/jumpToView/buttonPhoto/logo.png) no-repeat 0.916% -2.721%;
                background-size: 161vw 131vh;
                width: 15vw;
                height: 9.5vh;
                margin-left: 2vh;
            }

            .NET {

                background: url(/src/views/index/jumpToView/buttonPhoto/logo.png) no-repeat 14.117% 3.299%;
                background-size: 114vw 85vh;
                width: 30vw;
                height: 1.5vh;
            }

        }

        .status {
            width: 30vw;
            color: aliceblue;
            font-size: 2vh;
            display: flex;
            align-items: flex-end;
            line-height: 5vh;

            .stuatusSpan {
                height: 4vh;
                line-height: 6vh;
            }

            // margin-right: 30vw;
        }

        .Date {
            // width: 50vw;
            line-height: 6vh;
            // height: 100%;  
            color: aliceblue;
            font-size: 2vh;
            display: flex;
            align-items: flex-end;


            .DateSpan {
                height: 4vh;
                line-height: 6vh;
                // align-items: end;
            }
        }
    }

    .main {
        flex: 1;
        background-color: rgb(8, 17, 32);
        display: flex;
        // overflow: hidden;

        .mainBig {
            width: 72vw;
            // height: fit-content;
            margin: 0 0.5vw;
            height: 86vh;
            background-color: rgb(8, 17, 32);
            margin-left: 1vw;
            margin-right: 0.5vw;
            // overflow: hidden;
            // padding-left: 1vw;
            // padding-right: 1vh;
            // overflow: hidden;

            // overflow:hidden;
            // max-height:1000px;
            .equipcontent {
                height: 95%;
                display: flex;
                background-color: transparent;
                flex-wrap: wrap;
                justify-content: start;
                // overflow-y: scroll;
                overflow: hidden;
                // align-items: start;
                align-content: flex-start;
                margin-top: 1vh;

                .equip {
                    background: linear-gradient(rgb(91, 91, 91), rgb(77, 77, 77));
                    // background: #252424;
                    // border: 0.003vh solid rgb(77, 77, 77);
                    height: 10.8vh;
                    width: 8.5vw;
                    margin-right: 0.3vw;
                    border-radius: 1vh;
                    margin-bottom: 1vh;
                    font-size: 2vh;
                }

                .equip:hover {
                    // background: rgb(90, 107, 142);
                    background: rgb(8, 17, 32)
                }
            }

            .swap {
                width: 100%;
                height: 5%;
                display: flex;
                background-color: transparent;
                justify-content: center;
                margin-top: 1vh;
                // .icon{
                //     width: 500px;
                //     height: 300px;
                //     color:black;
                //     font-size: 50px;
                //     background-color: aqua;
                // }

                .demo-pagination-block {

                    //翻页导航属性
                    .el-pagination {
                        --el-pagination-font-size: 2vh;
                        --el-pagination-button-height: 4vh;
                        --el-pagination-bg-color: linear-gradient(rgb(51, 54, 61), rgb(43, 39, 39));

                        --el-pagination-hover-color: black;
                        --el-pagination-button-width: 5vh;

                    }

                    .el-input__inner {
                        --el-input-inner-height: calc(var(2vh, 32px) - 2px);
                    }
                }
            }
        }

        .mainList {
            width: 18vw;
            height: 85vh;

            // background-color:#333333 ;
            // height: 100vh;

            .playList {

                height: 70%;
                background: rgb(84, 84, 84);
                // background: linear-gradient(rgb(91, 91, 91), rgb(77, 77, 77));
                margin-top: 0.8vh;
                margin-right: 0.8vh;
                margin-left: 0vh;
                margin-bottom: 1vh;
                border-radius: 1vh;
                display: flex;
                align-items: center;
                flex-direction: column;

                .musicMenu {
                    width: 100%;
                    background-color: transparent;
                    height: 40%;
                    overflow-y: scroll;
                    padding-top: 1vh;


                    .musicMenuImdex {
                        // height: 10%;
                        background-color: transparent;
                        text-align: start;
                        color: white;
                        padding-left: 0.5vh;
                        font-size: 1vw;
                        font-weight: 700;
                        padding-bottom: 0.8vh;
                        display: flex;
                        align-items: center;
                        div{
                            margin-left: 0.5vh;
                        }
                    }

                    .active {

                        color: rgb(26, 141, 212);
                        font-weight: 700;
                    }

                    .musicMenuImdex:hover {
                        cursor: pointer;
                    }

                }

                .musicl {
                    background-color: transparent;
                    height: 47%;
                    padding-top: 1vh;
                    // display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    overflow-y: scroll;

                    .musicList {
                        // height: 10%;
                        width: 98%;
                        background-color: transparent;
                        overflow-x: hidden;
                        text-overflow: ellipsis;
                        text-align: start;
                        font-size: 1vw;
                        color: white;
                        padding-left: 0.5vh;
                        padding-bottom: 0.8vh;
                        overflow: hidden;
                        // font-size: 1.5vh;
                        font-weight: 500;

                        // padding-top: 1vh;

                    }

                    .activeMusic {
                        // background-color: #3e3737;
                        color: rgb(26, 141, 212);
                    }


                    .musicList:hover {
                        cursor: pointer;
                    }


                    .fenge {
                        background-color: #312222;
                        height: 0.2vh;
                        width: 13vw;
                        border-radius: 50%;
                    }
                }

                .fenge {
                    background-color: #312222;
                    height: 0.2vh;
                    width: 13vw;
                    border-radius: 50%;
                    margin-bottom: 0.3vh;
                }

                .playOrder {
                    display: flex;
                    background-color: transparent;
                    justify-content: space-around;
                    align-items: center;
                    width: 100%;


                    .orderButton {
                        width: 20%;
                        // background: radial-gradient(rgb(66, 64, 64), rgb(148, 147, 147));
                        // border: 0.1vh solid rgb(92, 90, 90);



                    }

                    .el-button.el-button {
                        margin-top: 0.5vh;
                        margin-bottom: 0.2vh;
                        width: 2.8vw;
                        height: 2.8vw;
                        border-radius: 50%;
                        padding: 2%;
                        font-size: 2vh;
                        // background:rgb(87,87,87);
                        background: rgb(84, 84, 84);
                        // background: darkcyan;
                        border: 0ch solid rgb(92, 90, 90);
                        margin-right: 0px;
                        // border-style: groove;
                        box-shadow: 0px 1.5px 0px #3e3737;
                        border-top: 1.5px rgb(143, 142, 142) solid;
                        // box-shadow: 0px -1px 0px white;
                    }

                    .btn {
                        color: rgb(2, 157, 246);
                        ;
                        // width: 50px;
                        // height: 38px;
                        // background: linear-gradient(0deg, rgb(66, 96, 125), rgb(94, 175, 233)) !important;
                    }

                    .isSected {

                        // background: linear-gradient(0deg, rgb(66, 69, 76), rgb(41, 44, 51));
                        color: rgb(2, 157, 246);
                        font-weight: 800;
                    }

                }

            }

            .volumn {
                height: 26%;
                background-color: transparent;
                text-align: start;
                display: flex;
                flex-direction: column;
                justify-content: center;
                // margin-top: 4vh;

                // justify-content: ;
                .thisVolumn {
                    // margin: 2vh;
                    height: 50%;
                    width: 85%;
                    margin: 2vh 1.5vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .vulumn {
                        background: url(/src/views/index/jumpToView/buttonPhoto/volumn.png) no-repeat 0 0;
                        background-size: 15vw 1vh;
                        // width: 100%;
                        height: 1vh;
                    }

                    span {

                        font-size: 2vh;
                        color: white;
                        margin-bottom: 1vh;
                        height: 20%;
                    }
                }

                .preVolumn {
                    // margin: 2vh;
                    height: 50%;
                    // margin: 2vh;
                    width: 85%;
                    margin: 2vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .vulumn {
                        background: url(/src/views/index/jumpToView/buttonPhoto/volumn.png) no-repeat 0 0;
                        background-size: 15vw 1vh;
                        width: 100%;
                        height: 1vh;
                        // margin-top: 1vh;
                    }

                    span {

                        font-size: 2vh;
                        color: white;
                        margin-bottom: 1vh;
                    }
                }
            }
        }

        .mainRight {
            width: 10vw;
            background-color: transparent;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .rightButtonContentTop {
                height: 50%;
                // background-color: beige;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .button {

                    height: 15%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    background-color: rgb(51, 54, 61);
                    border-top: 0.8vh rgb(65, 67, 73);
                    border-bottom: 0.8vh rgb(65, 67, 73);
                    border-left: 0ch;
                    border-right: 0ch;
                    border-radius: 0.5vh;
                    border-style: inset;
                    font-size: 1.2vw;
                    font-weight: 600;
                }

                .isSected {
                    background: linear-gradient(0deg, rgb(66, 69, 76), rgb(41, 44, 51));
                    color: rgb(2, 157, 246);
                    font-weight: 800;
                }

                // margin-top: 1vh;

            }

            .rightButtonContentBottom {
                height: 40%;
                // background-color: orange;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-bottom: 1vh;

                .button {

                    height: 19%;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    background-color: rgb(51, 54, 61);
                    border-top: 0.8vh rgb(65, 67, 73);
                    border-bottom: 0.8vh rgb(65, 67, 73);
                    border-left: 0ch;
                    border-right: 0ch;
                    border-radius: 2px;
                    border-style: inset;
                    font-size: 1.2vw;

                }

                .isSected {

                    background: linear-gradient(0deg, rgb(66, 69, 76), rgb(41, 44, 51));
                    color: rgb(2, 157, 246);
                    font-weight: 800;
                }
            }
        }
    }

    .under {
        width: 100%;
        height: 7vh;
        // background-color: blue;
        display: flex;
        flex: 1;
        justify-content: space-between;
        background-color: #252424;

        .button {
            width: 9%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background-color: rgb(51, 54, 61);
            border-top: 0.8vh rgb(65, 67, 73);
            border-bottom: 0.8vh rgb(65, 67, 73);
            border-left: 0ch;
            border-right: 0ch;
            border-radius: 2px;
            border-style: inset;
            font-size: 1.2vw;
            font-weight: 800;
        }

        .isSected {
            background: linear-gradient(0deg, rgb(66, 69, 76), rgb(41, 44, 51));
            color: rgb(2, 157, 246);
            font-weight: 800;
            // border: 0.5vh;
        }

        // position: absolute;
        // bottom: 0px;
        // position: fixed;
    }

}

:deep .el-input__wrapper {

    height: 3.5vh;
    background-color: #313131
}

:deep .el-input__inner {
    font-size: 2vh;
}

:deep .el-slider {
    --el-slider-height: 0.3vh;
}

:deep .el-slider__button {

    background: radial-gradient(circle at 0% 99%, rgb(41, 39, 39), rgb(148, 147, 147));
    border: #757070;
    height: 3vh;
    width: 1.2vh;
    border-radius: 25%;
}

:deep .el-slider__bar {
    background-color: RGB(27, 131, 200)
}

:deep .el-pagination button {
    color: #f7faff;
    font-weight: 600;
}

:deep .el-pagination button:disabled {
    background-color: #252424;
    color: #252424;
}

:deep .el-pager li.is-active {
    color: rgb(2, 157, 2460);
}

:deep .el-pager li {
    color: rgb(177, 197, 214);
    border-radius: 50%
}

:deep .el-pagination button {
    margin: 0 1vw;
}

:deep .el-pagination button {
    border-radius: 20vh;
}


:deep .el-pagination__goto {
    color: white;
}

::-webkit-scrollbar {
    width: 0.5vw;
}

::-webkit-scrollbar-track {
    background: rgb(179, 177, 177);
    border-radius: 0.2vh;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, rgb(136, 136, 136), rgb(76, 83, 87));
    // background:url('./jumpToView/buttonPhoto/ban.png');
    width: 30vw;
    height: 20vh;
    border-radius: 5vw;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(0deg, rgb(66, 96, 125), rgb(94, 175, 233));
    border-radius: 5vw;
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(0deg, rgb(46, 68, 88), rgb(150, 192, 223));
    border-radius: 5vw;
}



:deep .button:hover {


    cursor: pointer;
}

// :deep .el-slider__button {



//     // background: url('./jumpToView/buttonPhoto/volumn_button.png') no-repeat 84.669% 78.808%!important;
//     // // background-image: url('./jumpToView/buttonPhoto/volumn_button.png');
//     // background-size:80% 80%;
//     // width: 25px;
//     // height: 16px;

// }

.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    display: block;
    font-size: 12px;
    font-weight: 800;
    width: inherit;
}

:deep #right {
    button {
        // width: 2vh;
        height: 2.5vh;
        width: 2.5vh;
        background: linear-gradient(#b7b8be, #555e6d);
        margin: 0;
        border: 0ch;
        border-radius: 5px;
        // box-shadow: ;
        // margin-left: 0.1vw; 
        // box-shadow: 1px 1px 2px black;   
        // border:0.5vh solid #917373;
    }

    button:hover {
        background: rgb(89, 89, 89);
    }
}